<template>
  <div class="search-container">
    <div v-if="flag && searchResultList.length > 0" class="result-container">
      <!-- 展示搜索结果 -->
      <div v-for="(doctor, index) in searchResultList" :key="index" class="result-item">
        <img :src="doctor.avatar" alt="Doctor Avatar" class="avatar">
        <div class="doctor-info">
          <div class="name-and-status">
            <p class="name">{{ doctor.doctorName }}</p>
            <p v-if="doctor.status === 1" class="real-name">已实名</p>
            <p v-else class="not-real-name">未实名</p>
          </div>
          <p class="introduction" v-html="doctor.doctorIntroduction">{{ doctor.doctorIntroduction }}</p>
        </div>

        <div class="getMore" @click="communicate(doctor)">
          点击发起聊天&#187;
        </div>
      </div>
    </div>
    <div v-else class="no-result-container">
      <!-- 没有搜索内容时的提示信息 -->
      <p class="no-result-text">暂无搜索结果</p>
    </div>
    <div v-if="flag && searchResultList.length === 0" class="loading-container">
      <p class="loading-text">正在加载...</p>
    </div>
  </div>
</template>

<script>
import config from "../../config";
export default {
  data() {
    return {
      searchResultList: [], // 假设这是搜索结果数组
      key:'',
      flag:false    //控制展示搜索结果
    };
  },
  methods:{
    communicate(index){
      wx.showModal({
        title: '提示',
        content: '是否发起聊天',
        success :(res) => {
          if (res.confirm) {
            const value=wx.getStorageSync("userInfo")
            if(value)
            wx.navigateTo({
              url:'/pages/messageDetail/main?doctor='+JSON.stringify(index) + "&user="
            })
            else{
              wx.showToast({
                title: '抱歉，请先登录', //提示的内容
                duration: 1000, //持续的时间
                icon: 'error', //图标有success、error、loading、none四种
                mask: true //显示透明蒙层 防止触摸穿透
              })
            }
          }
        }
      })
    }
  },
  onLoad(options){
    this.key=options.key
    const doctorSearchUrl=config.searchDoctorUrl
    wx.request({
      url:doctorSearchUrl,
      method:"POST",
      data:{
        key:this.key,
      },
      success:(res)=>{
        this.searchResultList=res.data.data
        if(this.searchResultList != null) this.flag=true
      }
    })
  }
};
</script>


<style scoped>
.search-container {
  padding-top: 9%;
  display: flex;
  justify-content: center;
  height: 100vh; /* 使容器占据整个视口高度 */
  white-space: pre-line;
}
.result-item {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.avatar {
  height: 90px;
  border-radius: 50%;
  margin-right: 15px;
}
.no-result-container {
  text-align: center;
}

.no-result-text {
  color: #999;
  font-size: 16px;
}

.loading-container {
  text-align: center;
  margin-top: 20px;
}

.loading-text {
  color: #999;
}

.doctor-info {
  font-family: 'Arial', sans-serif; /* 设置字体 */
  margin: 10px;
  width: 228%;
}


.name-and-status {
  flex: 1;
}

.name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.real-name {
  color: green; /* 已实名的状态显示为绿色 */
}

.not-real-name {
  color: red; /* 未实名的状态显示为红色 */
}

.introduction {
  margin-top: 10px;
}

.getMore {
  position: absolute;
  top: 2%;
  right: 4%;
  font-size: 10px;
}
</style>
